<template>
  <h2>条件渲染</h2>
  <p>v-if VS v-show VS v-for</p>
  <div class="note">
    <p style="color:red;font-weight:bold">v-if</p>
    <p>1. v-if: 用于条件性地渲染一块内容。返回真值时才被渲染此内容</p>
    <p>2. v-if: 可用在template标签上，用于条件选中template标签</p>
  </div>
  <div class="note">
    <p style="color:red;font-weight:bold">v-show</p>
    <p>1. v-show: 用于条件性地渲染一块内容。返回真值时才被渲染此内容 </p>
    <p>2. v-show: 不可用在template标签上，也不能和 v-else 搭配使用</p>
    <p>3. v-show: 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。(类似于display:none)</p>
  </div>
  <div class="note">
    <p style="color:red;font-weight:bold">v-if VS v-show</p>
    <p>1. v-if: “真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。</p>
    <p>2. v-if: 惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。</p>
    <p>3. v-show: 元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。</p>
    <p>4. v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销</p>
    <p>适用场景：如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适</p>
  </div>

  <hr class="hr-style" />
  <h3>v-if</h3>
  <div>
    <h4>V-IF \ V-ELSE</h4>
    <h4 v-if="awesome">V-IF: Vue is awesome!</h4>
    <h4 v-else>V-ELSE: Oh no 😢</h4>
    <button @click="awesome = !awesome">Toggle</button>

    <hr class="hr-style" />
    <h4>V-IF \ V-ELSE-IF \ V-ELSE</h4>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
    <button @click="setType('A')">满足条件V-IF</button>
    <button @click="setType('B')">满足条件V-ELSE-IF</button>
    <button @click="setType('C')">满足条件V-ELSE-IF</button>
    <button @click="setType('')">满足条件V-ELSE</button>

  </div>

  <hr class="hr-style" />
  <h3>v-show</h3>
  <div>
    <p v-show="ok">Hello! I'm V_SHOW</p>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study3StuDemo4'
}
</script>

<script setup lang="ts">
import { ref } from 'vue'

// 数据
const awesome = ref(true)
const type = ref('A')

const ok = ref(true)

// 方法
function setType(newType: string) {
  type.value = newType
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
